<template>
	<view class="container">
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>报警人
			</view>
			<input type="text" v-model="inputPerson" placeholder="请输入报警人" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>联系方式
			</view>
			<input type="text" v-model="inputPhone" placeholder="请输入联系方式" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title" style="width:140upx">
				<span style="color: red;">*</span>灾害类型
			</view>
			<picker @change="bindTypeChange" :range="disasterTypes" range-key="tagName">
				<view class="picker_class">{{inputType}}</view>
			</picker>
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>发生地点
			</view>
			<input type="text" v-model="inputAddress" placeholder="请输入发生地点" class="picker_class" />
		</view>
		<view class="group_item">
			<view class="group_title">
				<span style="color: red;">*</span>详情描述
			</view>
			<textarea maxlength="140" v-model="contentInput" type="text" placeholder="请输入详情描述" class="picker_content_class" />
			</view>
		<view class="group_item1">
			<view class="group_title1">
				图片
			</view>
			<view>
				<robby-image-upload v-model="imageUrlList" fileKeyName="files" :header="header" :formData="formData"
					:server-url="uploadUrl" :showUploadProgress="true" limit="6"></robby-image-upload>
			</view>
		</view>
		<button type="primary" class="button_class" @click="managerAlarm">提交</button>
	</view>
</template>

<script>
	import robbyImageUpload from "@/components/robby-image-upload/check-image-upload";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				inputPerson: '',
				inputPhone:"",
				inputType:"请选择灾害类型",
				inputAddress:"",
				contentInput:"",
				communityId:this.$api.util.getAreaCode(),
				disasterTypes: [],
				imageUrlList: [],
				header: {
					appId: uni.getStorageSync("appId")
				},
				formData: {},
				uploadUrl: this.$api.request.apiBaseUrl + 'uploadSingleFile'
			}
		},
		onLoad() {
            this.getDisasterTypes()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			getDisasterTypes(){
				let params = {
					tagType:"ALARM",
					areaCode:this.communityId
				}
				this.$api.request.inquiryTag(params,(res)=>{
					if (res.body.status.statusCode == 0) {
						this.disasterTypes = res.body.data.tags
					} else {
						uni.showToast({
							title: "查询类型失败！",
						})
					}
				})
			},
			managerAlarm() {
				if(this.inputPerson == ""){
					this.$api.msg("请输入报警人")
					return;
				}
				
				if(this.inputPhone == ""){
					this.$api.msg("请输入联系方式")
					return;
				}
				
				if (!this.$api.util.validateMobileNo(this.inputPhone)) {
					this.$api.msg('请输入正确的手机号码');
					return;
				}
				
				if(this.inputType == "请选择灾害类型"){
					this.$api.msg("请选择灾害类型")
					return;
				}
				
				if(this.inputAddress == ""){
					this.$api.msg("请选择发生地点")
					return;
				}
				
				if(this.contentInput == ""){
					this.$api.msg("请输入详情描述")
					return;
				}
				
				let params = {
					"contactsName":this.inputPerson,
					"contactsPhone":this.inputPhone,
					"title": this.titleInput,
					"content": this.contentInput,
					"place":this.inputAddress,
					"imageUrl": this.imageUrlList,
					"userUuid": this.userInfo.userUuid,
					"areaCode": this.communityId,
					"requestType":"ADD",
					"inputTime":new Date(),
					"tagType":"ALARM",
					"tagUuid": this.tagUuid,
					"anonymous":"0",
					"open":"1",
				}
				this.$api.request.managerEnvent(params, (res) => {
					if (res.body.status.statusCode == 0) {
						uni.showToast({
							title: "提交成功",
						})
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					} else {
						uni.showToast({
							title: "提交失败",
						})
					}
				})
			},
			bindTypeChange(e){
				this.inputType = this.disasterTypes[e.target.value].tagName;
				this.tagUuid = this.disasterTypes[e.target.value].tagUuid
			}
		},
		components: {
			robbyImageUpload
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #FBFBFB;
		overflow: hidden;
	}

	.group_item {
		width: 100%;
		padding: 0upx 30upx;
		margin: 10upx 0;
		display: flex;
		flex-direction: row;
		background-color: white;
	}

	.group_item1 {
		width: 100%;
		padding: 10upx 30upx;
		margin: 10upx 0;
		background-color: white;
		overflow: hidden;
	}

	.group_title1 {
		width: 100upx;
		font-size: 30upx;
		font-weight: bold;
	}

	.group_title {
		width: 180upx;
		padding-top: 30upx;
		/* height: 100upx; */
		/* line-height: 100upx; */
		font-size: 30upx;
		font-weight: bold;
	}

	.picker_class {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	.picker_content_class {
		width: 100%;
		height: 200upx;
		margin-top: 30upx;
		margin-left: 30upx;
		font-size: 28upx;
		padding-left: 10upx;
	}

	input {
		padding-left: 10upx;
	}

	.button_class {
		position: fixed;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1DA3EE !important;
		color: white
	}
</style>
